<template>
	<view>
		<view class="cover">
			<image :src="info.cover" mode="widthFix"></image>
		</view>
		<view class="tab-title">
			<u-tabs :list="list" :is-scroll="false" bar-height="4" active-color="#333" inactive-color="#555" :current="current" @change="change"></u-tabs>
		</view>
		
		<view class="content">
			<view class="intro" v-show="current == 0">
				<jyf-parser :html="info.content"></jyf-parser>
			</view>
			<view class="co-list" v-show="current == 1">
				<view class="item" v-for="(item,index) in chapter" :key="index">
					<view class="chapter u-flex">
						<text class="u-line-1">第{{item.chapterNo}}章  {{item.chapterName}}</text>
						<!-- <image src=""></image> -->
					</view>
					<view class="children" v-for="(item2,index2) in item.class" :key="index2" @click="children(item2)">
						<view class="title u-flex">
							<text>第{{item2.classNo}}节 {{item2.className}}</text>
							<image src="/static/icon2/lock.png" v-if="!item2.buy && !item2.free"></image>
						</view>
						<text class="free" v-if="item2.free">免费</text><text class="time">{{item2.timeLong}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部安全区适配 -->
		<view class="safe-area-inset-bottom" style="box-sizing: content-box;" :style="{height: buy ? '0' : '121rpx'}"></view>
		<view class="buy-course u-flex safe-area-inset-bottom" v-if="!buy">
			<view class="push-btn" @click="buyShow">
				<text class="num1">购买</text><text class="num2">{{info.price}}i币</text>
			</view>
		</view>
		
		<u-modal v-model="show" @confirm="goBuy" content="购买后可解锁全部课程" show-cancel-button confirm-text="购买" confirm-color="#DF7B5A" :show-title="!1"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '简介'
				}, {
					name: '课程'
				}],
				current: 0,
				show:!1,//购买提示模态
				course_id:'',
				info:'',//详情
				chapter:'',//章节信息
				buy:1
			}
		},
		methods: {
			change(index) {
				this.current = index;
			},
			buyShow(){
				this.show = !0
			},
			courseDetail(){
				this.$u.api.courseDetail({
					course_id:this.course_id
				}).then(res=>{
					this.info = res
				})
				this.$u.api.courseChapter({
					course_id:this.course_id
				}).then(res=>{
					this.chapter = res
					if(res.length && res[0].class.length){
						this.buy = res[0].class[0].buy
					}
				})
			},
			children(item){
				// 小节点击
				if(item.free || item.buy){
					// 免费课程 或者 已购买可以进行跳转观看
					item.type === 1 && this.$app.jump('/pages/course/video?id='+item.id)//视频
					item.type === 2 && this.$app.jump('/pages/course/audio?id='+item.id)//音频
					item.type === 3 && this.$app.jump('/pages/course/html?id='+item.id)//图文
				}else{
					// 购买
					this.show = !0
				}
			},
			goBuy(){
				uni.$once('onBuyCourse'+ this.course_id,()=>{
					// 刷新课程信息
					this.courseDetail()
				})
				this.$app.jump('/pages/course/submit?id='+this.course_id)
			}
		},
		onLoad(o) {
			this.course_id = o.id
			this.courseDetail()
		}
	}
</script>

<style lang="scss" scoped>
	.cover{padding: 20rpx 60rpx 0;
		image{display: block;width: 100%;border-radius: 20rpx;}
	}
	.tab-title{border-bottom: 1rpx solid #eee;padding-right: 300rpx;background-color: #fff;z-index: 9;position: sticky;top: 0;}
	.content{
		padding: 20rpx 60rpx;
	}
	.co-list{
		.item{
			.chapter{
				justify-content: space-between;height: 72rpx;
				text{font-size: 30rpx;font-weight: bold;}
				image{width: 30rpx;height: 34rpx;display: block;flex-shrink: 0;margin-right: 10rpx;}
			}
			.children{
				background-color: #f7f7f7;border-radius: 20rpx;position: relative;padding: 20rpx;margin-bottom: 20rpx;
				&:last-child{margin-bottom: 0;}
				image{display: block;width: 31rpx;height: 34rpx;flex-shrink: 0;margin-left: 10rpx;}
				.free{color: $tc;font-size: 22rpx;padding-right: 14rpx;}
				.title{justify-content: space-between;
					text{display: block;word-break: break-all;text-align: justify;}
				}
				.time{font-size: 22rpx;color: #555;}
			}
		}
	}
	
	// 购买课程
	.buy-course{
		justify-content: flex-end;border-top: 1rpx solid #eee;
		position: fixed;height: 100rpx;box-sizing: content-box;z-index: 9;background-color: #fff;bottom: 0;left: 0;width: 100%;
		.push-btn{
			background: linear-gradient(90deg, #FAE273 0%, #F4D039 100%);border-radius: 100rpx;font-weight: bold;white-space: nowrap;padding: 10rpx 20rpx;
			margin-right: 60rpx;
			.num1{}
			.num2{color: #EF682C;padding-left: 10rpx;}
		}
	}
</style>
